<template>
  <view class="content">
    <view class="search-box">
      <my-search @click="gotoSearch()"></my-search>
    </view>
    <view>
      <swiper class="swiper" circular indicator-dots="true" autoplay="true" interval="3000" duration="500">
        <swiper-item 
              v-for="(item, index) in swiperImages" 
              :key="index" 
              :style="{ backgroundImage: `url(${item})` }" 
              class="swiper-item">
            </swiper-item>
          </swiper>
      </swiper>
    </view>
    <!-- 活动导航 -->
    <view class="nav-box">
      <navigator class="nav-item" url="/pages/product/index/index"> 
        <image src="../static/home/fl.png"></image>

        <text>商品</text>
      </navigator>
      <navigator class="nav-item">
        <image src="../static/home/hd.png"></image>
        <text>活动</text>
      </navigator>
      <navigator class="nav-item" url="/pages/plant/article/article">
        <image src="../static/home/js.png"></image>
        <text>农技</text>
      </navigator>
      <navigator class="nav-item">
        <image src="../static/home/sm.png"></image>
        <text>说明</text>
      </navigator>

               

    </view>
    <!-- 推荐楼层 -->
    <view class="floor">
      <view class="recommend">

         <image src="../static/home/dz.png"></image> 

        <text style="font-size: 40rpx;">为你推荐</text>
      </view>
      <view class="floor-items">
        <view v-for="(item, index) in floorList" :key="index" class="floor-item">
        
            <product
              :imageUrl="getPrimaryImageUrl(item.images)" 
              :title="item.productName" 
              :price="item.price" 
			  :productId="item.productId"
			  :unit="item.unit"
            />
     
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getFloor, getSwiperImage } from '@/api/home/home.js';

export default {
  data() {
    return {
      swiperImages: [
           "/static/fss-image/lbt1.jpg",
           "/static/fss-image/lbt2.jpg",
           "/static/fss-image/lbt4.jpg"
         ],
      floorList: [],
    };
  },
  methods: {

    async getFloorList() {
      try {
        const data = await getFloor();
        this.floorList = data;
      } catch (error) {
        console.error('获取数据失败:', error);
      }
    },

   getPrimaryImageUrl(images) {
      if (!images || images.length === 0) {
        // 返回默认动态图片路径
        return '/static/home/dj.jpg'; // 默认图片的 URL
      }
  
      const primaryImage = images.find(image => image.isPrimary);
      // 返回主图 URL 或第一张图片的 URL，如果都没有，则返回默认图片
      return primaryImage?.imageUrl || images[0]?.imageUrl || '/static/home/dj.jpg';
    },
	},
  onShow() {
    this.getFloorList();
  },
};
</script>

<style scoped>
.swiper {
  width: 100%;
  height: 180px;
  background-color: #00aa00;
  overflow: hidden;
}

.swiper-item {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.nav-box {
  height: 120rpx;
  display: flex;
  justify-content: space-around;
  margin-top: 20rpx;
  background-color: white;
  border-radius: 30rpx;
  padding: 10rpx;
}

.nav-item {
  height: 70rpx;
  width: 70rpx;
  margin: 5rpx 0;
  align-items: center;
  flex-direction: column;
  text-align: center;
  font-weight: bold;
}

.nav-item image {
  width: 200rpx;
  height: 60rpx;
}

.recommend {
    display: flex; /* 使用 Flexbox */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    margin-bottom: 20rpx; /* 底部间隔 */


}

.recommend image {
  width: 40rpx;
  height: 40rpx;
   margin-right: 10rpx; /* 图片和文本之间的间隔 */
}

.floor {
  margin-top: 20rpx;
}

.floor-items {
	padding: 5px;
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  justify-content: space-between; /* 每行商品间隔均匀 */
}

.floor-item {
  width: calc(50% - 10rpx); /* 每个商品占据50%宽度，留出间隔 */
  margin-bottom: 20rpx; /* 商品之间的底部间隔 */
}
</style>
